<template>
	<view>

		<view class="bg_box">
			<!-- <image class="bg01" src="../../static/bg02.png"
				mode="widthFix">
			</image> -->
			<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
				<view class="back iconfont" @tap="backPage">&#xe8c8;</view>
				<view class="text">销售排行</view>
			</view>
			
			<view class="nav" :class="scrrol == true ? 'scrrolHeader' : ''">
				<view class="navauto">
					<block v-for="(item, index) in menu" :key="index">
						<view class="menu" :data-index="index" @tap="setNavMenu">
							<view class="text" :class="index == select ? 'menucolor' : ''||scrrol == true ? 'scrrolHeader02' : ''">{{ item.text }}</view>
							<view class="line" :class="index == select ? 'menucolor02' : ''"></view>
						</view>
					</block>
				</view>
			</view>
			
			<view class="bg_content">
				<!-- <view class="left_content">
					<view class="left_auto">
						<block v-for="(item, index) in list" :key="'list'+index">
							<view class="list" :class="index == 2 ? 'pageStyle' : ''" :data-url="item.url" @click="gotopage">{{item.text}}</view>
						</block>
					</view>
				</view> -->
				<view class="right_content">
					
					<view class="rank_box">
						<view class="rank_list">
							<view class="other">名称</view>
							<view class="other">业绩</view>
							<!-- <view class="other"></view> -->
						</view>
						<block v-for="(item, index) in data" :key="'4'+index">
							<view class="rank_list">
								<view class="other">{{item.name}}</view>
								<view class="other">{{item.money}}</view>
								<!-- <view class="other">加入</view> -->
							</view>
						</block>
					</view>
					<!-- <block v-for="(item, index) in 10" :key="'4'+index">
						<view class="menu_box">
							<view class="name_box">
								<view class="name">团名:啊生歌功</view>
								<view class="menu">加入</view>
							</view>
							<view class="menu_auto">
								<view class="menu">
									<view class="num">0</view>
									<view class="text">人数</view>
								</view>
								<view class="menu">
									<view class="num">0</view>
									<view class="text">业绩</view>
								</view>
								<view class="menu">
									<view class="num">0</view>
									<view class="text">奖励</view>
								</view>
							</view>
						</view>
					</block> -->
				</view>
					




			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrrol: false,
				select: 0,
				menu: [
					{
						text: '个人'
					},
					{
						text: '团队'
					},					
				],
				list:[
					{
						text:'加盟政策',
						url:'/pages/index/index'
					},
					{
						text:'团队加入',
						url:'/pages/index/team'
					},
					{
						text:'销售排行',
						url:'/pages/index/rank'
					},
					{
						text:'素材中心',
						url:'/pages/index/material'
					},
					{
						text:'活动中心',
						url:'/pages/index/events'
					},
					{
						text:'我的',
						url:'/pages/personal/personal'
					},
				],
				data:'',
				data1:'',
				data2:'',
				id:0,

			}
		},
		onLoad(e) {
			let me  = this;
			    me.id=e.id;
				me.Net._get('paihanlist',{},(res)=>{
					if(res.code ==1){
						//console.log(res.data)
						me.data=res.data
                        me.data2=res.data
					}
				});
me.Net._get('tdhanlist',{},(res)=>{
					if(res.code ==1){
						//console.log(res.data)
						me.data1=res.data

					}
				});
		},
		onShow() {
			let that = this;
			//that.loadData();
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				if(index==0) that.data=that.data2
				else that.data=that.data1
				
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header{
		background-color: #4d726f;
	}
	.header .text{
		background-color: #4d726f;
		color: #fff;
	}
	
	.header .back{
		color: #fff;
	}

	.clear_box07 {
		height: 27vw;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
		display: block;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(27vw + var(--status-bar-height));
		z-index: 999;
		display: flex;
		box-sizing: border-box;
		padding-top: 4%;
	}
	
	
	.bg_box .bg_content .left_content{
		width: 24vw;
		margin-right: 3vw;
		position: relative;
		
	}
	
	.bg_box .bg_content .right_content{
		flex: 1;
		/* background-color: #fff; */
		/* height: calc(100vh - 21.5vw); */
		border-radius: 0 3vw 3vw 0;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	.bg_box .bg_content .left_content .left_auto{
		width: 24vw;
		position: fixed;
		left: 4%;
		top: calc(17.5vw + var(--status-bar-height));
	}
	
	
	.bg_box .bg_content .left_content .list{
		width: 100%;
		height: 12vw;
		background-color: #fff;
		font-size: 3.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #fff;
		border-bottom: 1px solid #4d726f;
	}
	
	.bg_box .bg_content .left_content .list:nth-child(1){
		border-radius: 1vw 0 0 0;
	}
	
	.bg_box .bg_content .left_content .list:last-child{
		border-radius: 0 0 0 1vw;
		border-bottom: none;
	}
	
	.pageStyle{
		font-weight: bold;
		color: #fff !important;
		background-color: #4d726f !important;
	}
	
	.rank_box{
		width: 100%;
	}
	
	.rank_list{
		width: 100%;
		height: 10vw;
		display: flex;
		align-items: center;
		/* background-color: #f9f9f9; */
	}
	
	.rank_box .rank_list:nth-child(1){
		background-color: #4d726f;
		border-radius: 2vw 2vw 0 0;
		font-weight: bold;
	}
	
	.rank_box .rank_list:nth-child(1) .other{
		color: #fff;
	}
	
	.rank_list .other{
		font-size: 3.5vw;
		color: #333;
		flex: 1;
		display: flex;
		align-items: center;		
		justify-content: center;
	}
	
	.rank_list .other:last-child{
		color: #4d726f;
	}
	
	.menu_box{
		width: 100%;
		background-color: #fff;
		padding: 3vw ;
		margin-bottom: 4%;
	}
	
	.menu_box .name_box{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.menu_box .name_box .name{
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		flex: 1;
	}
	
	.menu_box .name_box .menu{
		font-size: 3.5vw;
		color: #fff;
		width: 14vw;
		height: 7vw;
		border-radius: 7vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #4d726f;
	}
	
	.menu_box .menu_auto{
		width: 100%;
		margin-top: 5vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.menu_box .menu_auto .menu{

	}
	
	.menu_box .menu_auto .menu .num{
		font-size: 3.8vw;
		color: #333;
		text-align: center;
		font-weight: bold;
	}
	
	.menu_box .menu_auto .menu .text{
		font-size: 3.5vw;
		color: #333;
		text-align: center;
		margin-top: 1vw;
	}
	
	.nav {
		width: 100%;
		height: 13.5vw;
		background-color: #4d726f;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13vw + var(--status-bar-height));
		z-index: 9999;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: fit-content;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		width: 50%;
		position: relative;
	}
	
	.nav .navauto .menu .text {
		font-size: 4vw;
		color: #fff;
		text-align: center;
		line-height: 13.5vw;
	}
	
	.nav .navauto .menu .line {
		width: 15%;
		height: 1vw;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 7.5%);
		bottom: 1vw;
		display: none;
		background-color: #fff;
	}
	
	.nav .navauto .menu .line image{
		width: 100%;
	}
	
	.menucolor {
		font-weight: bold;
		font-size: 4.5vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.scrrolHeader{
		background-color: #4d726f !important;
	}
	

</style>